define(['jquery', 'underscore', 'tweenlite', 'cssplugin', 'app/helper/util'], 
function($, _, TweenLite, CSSPlugin, util) {
var INTERVAL_CLICK_TIME = 2 * 1000;
var DEFAULT_Z_INDEX = 1;
var _index = 0;
var _list;
var _$parent;
var _zIndex = 0;
var _dimensions = {};
var _width, _height;
var _lastClickTime = 0;
var _idleLoading = true;
var _obj = {};

function createImage(index, src){
  var img = '<img >';
  var key = 'img-' + (new Date).getTime();
  var $image;
  //automaticly add 1 for z-index
  _zIndex++;
  //
  $image = $(img).appendTo(_$parent).css({'z-index':_zIndex, opacity:0}).attr({key:key}).load(function(){
    //record each set of width and height
    _dimensions[key] = {width:$(this).width(), height:$(this).height()};
    // console.log($(this).width());
    // console.log($(this).height());
    resizeOne($(this));
    TweenLite.fromTo($(this), 1, {opacity:0, immediateRender:true}, {opacity:1, onComplete:removeImages, onCompleteParams:[key], ease:Power2.easeOut});
    // console.log($(this).css('z-index'));
    _idleLoading = true;
  })
  $image.prop({src:src});
  // console.log(key, src);
}

function resizeImages(){
  //resize all
  _$parent.children().each(function(){
    resizeOne($(this));
  });  
}

function removeImages(except){
  var $item;
  // console.log('except key:', $except);
  _$parent.children().each(function(){
    if($(this).attr('key') == except){
      $item = $(this);
    }else{
      $(this).remove();
    }
  });
  //switch current item's z-index to the lowest one
  if($item){
    _zIndex = DEFAULT_Z_INDEX;
    $item.css({'z-index':_zIndex});
    // console.log('switch current z-index to', _zIndex);
  }
}

function resizeOne($img){
  var key = $img.attr('key');
  var d = _dimensions[key];
  var pW, pH;
  //flag: algin pattern, 0 horizontal; 1 vertical
  var x = 0, y = 0, newW = 0, newH = 0, ratio = 0;
  if(d){
    /*
    var newW = d.width * (height / d.height);
    var newH = d.height * (width / d.width);
    //according to width
    if(newW < _width){
      newW = width;
    }else{
      newH = height;
    }
    if(newH > height){
      y = -(newH - height) / 2;
    }
    */
    pW = _width / d.width;
    pH = _height / d.height;
    //if the ratio of width is greater than height's, then using width's
    if (pW > pH){ 
      ratio = pW;
    }else{
      ratio = pH;
    }
    newW = d.width * ratio;
    newH = d.height * ratio;
    x = (_width - newW) / 2;
    y = (_height - newH) / 2;
    // console.log(x, y);
    $img.css({width:newW, height:newH, left:x, top:y});
  }
}

function getImagelist($images){
  var list = [];
  $images.each(function(){
    list.push($(this).prop('src'));
  });
  return list;
}

_obj.init = function($parent){
  _$parent = $parent;
  _list = getImagelist($parent.find('img'));
  // console.log('_list', _list);
  //random default
  _index = util.getRandomInt(0, _list.length);
  $parent.empty().removeClass('hidden');
  // default
  createImage(_index, _list[_index]);
  _lastClickTime = (new Date).getTime();
  // createImage(2, _list[2]);
  //it will be interrupted by chrome when it's in background
  // setInterval(showSlide, DELAY_SHOW_TIME);
}

_obj.resize = function(width, height){
  _width = width;
  _height = height;
  resizeImages();
}

_obj.change = function(){
  var time = (new Date).getTime();
  if((time - _lastClickTime > INTERVAL_CLICK_TIME) && _idleLoading){
    _idleLoading = false;
    _index++;
    if(_index >= _list.length){
      _index = 0;
    }
    createImage(_index, _list[_index]);
    _lastClickTime = time;
  }
}

return _obj;
});